<template>
	<page-meta>
	    <navigation-bar
	      :title="logintype?'验证码登录':'重置密码'"
	      front-color="#ffffff"
	      background-color="#046ef6"
	    />
	  </page-meta>
	<view>
		
		<view style="height: 40px;background: #fff;padding: 0 12px;line-height: 40px;font-size: 15px;">
			<text v-if="$store.state.user.fphone">
				当前帐号{{newpass()}}
			</text>
			<view class="input-box" :class="{active:focusid == 1,err:seltype}">
				<view>
					<input type="number" class="uni-input" v-model="query.phone" :focus="focusid == 1" @focus="seltype=false;onFocus(1)" @blur="blur" placeholder="请输入手机号"/>
					<text></text>
					<button type="default" style="color:#ccc ;font-size: 12px;" v-if="type">{{test}}s后可操作</button>
					<button type="default" style="color:#6bbaf5 ;" @tap="getcode" v-else>获取验证码</button>
				</view>
			</view>
			<view class="input-box" :class="{active:focusid == 2}">
				<view>
					<input class="uni-input" type="number" v-model="query.code" :focus="focusid == 2" @focus="seltype=false;onFocus(2)" @blur="blur" placeholder="请输入验证码" style="width: 100%;"/>
				</view>
			</view>
			<view class="input-box" v-if="!logintype" :class="{active:focusid == 3}">
				<view style="position: relative;">
					<input type="text" class="uni-input" v-model="query.pass" :focus="focusid == 3" @focus="seltype=false;onFocus(3)" @blur="blur" placeholder="请输入新密码" style="width: 100%;" :password="showPassword"/>
					<!-- <uni-text  @click="changePassword" data-v-0bf90c00="" data-v-25aa4a88="" class="uni-icons" style="position: absolute;background: none; font-size: 25px;right: 38px;top: -9px;" :style="{'color':showPassword?'#ccc':'rgb(24, 120, 255)'}"><span></span></uni-text> -->
					<image  @click="changePassword" style="position: absolute;right: 18px;top: 8px;width: 33px;height: 20px;" src="../../static/img/see.png" mode="" v-if="!showPassword"></image>
					<image  @click="changePassword" style="position: absolute;right: 18px;top: 8px;width: 33px;height: 20px;" src="../../static/img/see1.png" mode="" v-else></image>
				</view>
			</view>
			<button style="width: 100%;display: block;margin: 0px auto;margin-top: 60px;background: #046ef6;border-radius: 15px;color: #fff;" type="default" @tap="sub">{{logintype?'登录':'确定'}}</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			query:{
				phone:this.$store.state.user.fphone?this.$store.state.user.fphone:'',
				code:'',
				pass:''
			},
			showPassword: true,
			type:false,
			test:60,
			Time:{},
			logintype:false,
			focusid:0,
			seltype:false
		};
	},
	methods: {
		onFocus(idx) {
			this.focusid = idx
		},
		blur(){
			// this.focusid = 0;
		},
		newpass(){
			return (this.$store.state.user.fphone+'').replace((this.$store.state.user.fphone+'').substr(3,5),'*****');
		},
		changePassword: function() {
		    this.showPassword = !this.showPassword;
		},
		sub(){
			if (!/^1[3456789]\d{9}$/.test(this.query.phone)) {
				uni.showToast({
					title: '手机号码格式错误!',
					icon: 'none'
					// position:'top'
				});
				this.focusid = 1;
				return;
			}
			var _this = this; 
			var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[a-zA-Z]).*$/;
			if(!this.logintype){
				if (!pPattern.test(this.query.pass)) {
					uni.showToast({
						title: '用户密码必须最少6位，包括至少1个大写字母或者1个小写字母，1个数字!',
						icon: 'none'
						// position:'top'
					});
					this.focusid = 3;
					return;
				};
				// console.log({
				// 		faccount:this.query.phone,
				// 		fpwd:this.query.pass,
				// 		fcode:this.query.code
				// 	})
				uni.request({
					url: this.$store.state.url+'/api/shequuser/login/forgenpwd', //修改密码
					method: 'POST',
					data: JSON.stringify({
						faccount:this.query.phone,
						fpwd:this.query.pass,
						fcode:this.query.code
					}),
					success: res => {
						res = res.data;
						console.log(res)
						// console.log(res)
						if(res.code == 200){
							uni.showToast({
								title: '重置成功,请重新登录！',
								icon: 'none'
								// position:'top'
							});
							setTimeout(function(){
								_this.$store.commit('removeuser');
							},1500);
						}else{
							_this.focusid = 1;
							uni.showToast({
								title: res.msgs,
								icon: 'none'
								// position:'top'
							});
						}
					},
					fail: res => {
						console.log(res);
					}
				});
			}else{
				
				var _this = this;
				if(this.query.code.length != 6){
					uni.showToast({
						title: '请正确输入验证码',
						icon: 'none'
						// position:'top'
					});
					_this.focusid = 2;
					return;
				}
				uni.request({
					url: this.$store.state.url+'/api/shequuser/login/in', //验证码登录
					method: 'POST',
					data: JSON.stringify({
						faccount:this.query.phone,
						fpwd:this.query.pass,
						fcode:this.query.code
					}),
					success: res => {
						res = res.data;
						
						if(res.code == 200){
							uni.showToast({
								title: '登陆成功',
								icon: 'none'
								// position:'top'
							});
							setTimeout(function(){
								_this.$store.commit('setuser',res.data);
								uni.switchTab({
									url: '/pages/paihang/index'
								});
							},1500)
							
							
						}else{
							if(res.code == 401){
								//验证码
								_this.focusid = 2;
							}else if(res.code == 402){
								//账户
								_this.focusid = 1;
							}else{
								//密码
								_this.focusid = 3;
							};
							uni.showToast({
								title: res.msgs,
								icon: 'none'
								// position:'top'
							});
						}
						
					},
					fail: res => {
						console.log(res);
					}
				});
			}
		},
		retime(){
			var _this = this;
			_this.type = true;
			_this.test = 60;
			_this.Time = setInterval(function(){
				if(_this.test <= 0){
					clearInterval(_this.Time);
					_this.type = false;
				}
				_this.test = _this.test - 1;
			},1000)
		},
		getcode(){
			this.seltype = true
			var _this = this;
			if (!/^1[3456789]\d{9}$/.test(this.query.phone)) {
				uni.showToast({
					title: '手机号码格式错误!',
					icon: 'none'
					// position:'top'
				});
				_this.focusid = 1;
				return;
			}
			
			uni.request({
				url: this.$store.state.url + '/api/shequuser/login/getcode?phone=' + this.query.phone, //检查更新的服务器地址
				method: 'POST',
				success: res => {
					res = res.data;
					if (res.code == 200) {
						uni.showToast({
							title: '已发送，请注意查收',
							icon: 'none'
							// position:'top'
						});
						_this.retime();
					}else{
						uni.showToast({
							title: res.msgs,
							icon: 'none'
							// position:'top'
						});
					}
				},
				fail: res => {
					console.log(res);
				}
			});
		}
	},
	onLoad(e) {
		this.logintype = e.type;
		// if (e.data) {
		// 	this.data = e.data;
		// 	console.log(e.data); //打印出上个页面传递的参数。
		// }
	},
	mounted() {
	}
};
</script>

<style scoped>
	.input-box:hover,.input-box uni-view:hover{
		border-color:  #007aff;
	}
	.input-box.err:hover,.input-box.err uni-view:hover{
		border-color:  #d2d1cf;
	}
	.input-box{height: 35px;line-height: 35px;border: 2px solid #d2d1cf;border-radius: 10px;margin-top: 35px;}
	.input-box.active{border: 2px solid #046ef6;}
	.input-box uni-view{height: 100%;border: 1px solid #ccc;border-radius: 5px;margin-top: -1px;}
	.input-box.active uni-view{border: 1px solid #046ef6;}
	.input-box input{width: calc(70% - 3px);float: left;height: 100%;text-indent: 10px;font-size: 15px;}
	/* .input-box>uni-text{width: 70%;} */
	.input-box uni-text{width: 2px;height: 18px;margin-top: 9px;float: left;background: #d2d1cf;}
	.input-box button{width: 30%;float: left;height: 100%;border-left: 0;line-height: 35px;font-size: 14px;color: ;}
	
	uni-button[type=default]{background: none;}
	uni-button[type=default]::after{border: 0;background: none;}
</style>
